<template>
 	<div class="layui-layout layui-layout-admin">
       <Secondnav urlname="provin01"></Secondnav>
       <div class="viewport">
       	
        <div class="column">
            <!--概览-->
            <div class="overview panel">
                <div class="inner">
                    <div class="item">
                        <h4>2,190</h4>
                        <span>
                            <i class="icon-dot" style="color: #006cff"></i>
                            会员数
                        </span>
                    </div>
                    <div class="item">
                        <h4>190</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            门店数
                        </span>
                    </div>
                    <div class="item">
                        <h4>3,001</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3"></i>
                            商家数
                        </span>
                    </div>
                    <div class="item">
                        <h4>108</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35"></i>
                            顾客数
                        </span>
                    </div>
                </div>
            </div>
            <!--监控-->
            <div class="monitor panel">
                <div class="inner">
                    <div class="tabs">
                        <a href="javascript:;" data-index="0" class="active" style="border:none;">步行街社群</a>
                    </div>
                    <div class="content chat">
                        <dl v-for="(item,index) in sqlist" :class='index%2?"ts":""'>
                        	<dt><img :src=getUrl(item.logo)></dt>
                        	<dd>{{item.content}}</dd>
                        </dl>
                    </div>
                    
                </div>
            </div>
            <!--点位-->
            <div class="point panel">
                <div class="inner">
                    <h3>高品质步行街发展情况</h3>
                    <div class="chart">
                       <div id="tb02" style="height: 200px;width:100%;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column" style="flex:7">
            <!-- 地图 -->
            <div class="map">
                <h3>21条街区沙盘全图</h3>
                <div class="chart tssp">
                	<div class="jqlist">
                		<ul>
                			<li :class="mapcur==0?'cur':''" @click="mapshow(0)">
                				<h3>杭州清河坊步行街</h3>
                			</li>
                			<li :class="mapcur==1?'cur':''" @click="mapshow(1)">
                				<h3>杭州星光大道电影文化步行街</h3>
                			</li>
                			<li :class="mapcur==2?'cur':''" @click="mapshow(2)">
                				<h3>杭州中国丝绸城步行街</h3>
                			</li>
                			<li :class="mapcur==3?'cur':''" @click="mapshow(3)">
                				<h3>杭州湘湖慢生活街</h3>
                			</li>
                			<li :class="mapcur==4?'cur':''" @click="mapshow(4)">
                				<h3>宁波老外滩步行街</h3>
                			</li>
                			<li :class="mapcur==5?'cur':''" @click="mapshow(5)">
                				<h3>宁波东鼓道步行街</h3>
                			</li>
                			<li :class="mapcur==6?'cur':''" @click="mapshow(6)">
                				<h3>宁波南塘老街</h3>
                			</li>
                			<li :class="mapcur==7?'cur':''" @click="mapshow(7)">
                				<h3>宁波水街</h3>
                			</li>
                			<li :class="mapcur==8?'cur':''" @click="mapshow(8)">
                				<h3>温州五马•禅街</h3>
                			</li>
                			<li :class="mapcur==9?'cur':''" @click="mapshow(9)">
                				<h3>嘉兴海宁硬石商业街</h3>
                			</li>
                			<li :class="mapcur==10?'cur':''" @click="mapshow(10)">
                				<h3>温州瑞安忠义街</h3>
                			</li>
                			<li :class="mapcur==11?'cur':''" @click="mapshow(11)">
                				<h3>湖州爱山广场步行街</h3>
                			</li>
                			<li :class="mapcur==12?'cur':''" @click="mapshow(12)">
                				<h3>嘉兴月河步行街</h3>
                			</li>
                			<li :class="mapcur==13?'cur':''" @click="mapshow(13)">
                				<h3>湖州南潯东大街</h3>
                			</li>
                			<li :class="mapcur==14?'cur':''" @click="mapshow(14)">
                				<h3>湖州长兴东鱼坊步行街</h3>
                			</li>
                			<li :class="mapcur==15?'cur':''" @click="mapshow(15)">
                				<h3>丽水处州府城步行街</h3>
                			</li>
                			<li :class="mapcur==16?'cur':''" @click="mapshow(16)">
                				<h3>绍兴鲁迅中路步行街</h3>
                			</li>
                			<li :class="mapcur==17?'cur':''" @click="mapshow(17)">
                				<h3>金华古子城步行街</h3>
                			</li>
                			<li :class="mapcur==18?'cur':''" @click="mapshow(18)">
                				<h3>衢州水亭门步行街</h3>
                			</li>
                			<li :class="mapcur==19?'cur':''" @click="mapshow(19)">
                				<h3>舟山520幸福街</h3>
                			</li>
                			<li :class="mapcur==20?'cur':''" @click="mapshow(20)">
                				<h3>台州临海紫阳古街</h3>
                			</li>
                		</ul>
                	</div>
                    <div class="geo">
                    	<div id='tb04' style="width: 100%;height:100%;"></div>
                    </div>
                </div>
            </div>
            <!-- 用户 -->
            <div class="users panel" style="width:50%;float:left;">
                <div class="inner">
                    <h3>各街区复工率情况（%）</h3>
                    <div class="chart">
                        <div class="bar"><div id='tb05' style="width: 100%;height:100%;"></div></div>
                        <div class="data">
                            <div class="item">
                                <h4>120,899</h4>
                                <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                                                今日开店总量
                                </span>
                            </div>
                            <div class="item">
                                <h4>248</h4>
                                <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    今日新增
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top panel" style="width:48.5%;margin-left:1.5%;float:left;height:14.167rem">
                <div class="inner" style="display: block;">
                    <div class="all" style="width:100%;">
                        <h3>高品质步行街发展指数一览</h3>
                    </div>
                    <div class="province" style="clear:both;display:block;width:100%;">
                        <div id='tb03' style="width: 100%;height:200px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	</div>
</template>
<script>
	import echarts from 'echarts'
	import Pagetop from '../common/pagetop.vue'
	import Secondnav from './provinnav.vue' 
    import 'echarts/extension/bmap/bmap'
	export default {
	  name: 'index',
	  components: {Pagetop,Secondnav},
	  data () {
	    return {
	        itemData:'',
	        sqlist:'',
	        maplist:[],
	        mapcur:0,
	        bmap:'',
	        type:localStorage.getItem("type")
	    }
	  },
	  mounted(){
	  	this.gettb(1);
	  	this.gettb(2);
	  	this.getrl();
	  	this.getsq();
      	this.getfg();
	  },
	  methods: {
	  	getUrl:function(logo){
	  		return require('@/assets/img0'+logo+'.png');
	  	},
	  	gettb:function(index){
	  		var n = [{
        		backgroundColor:'rgba(255, 255, 255, 0)',
				grid: {
			        left: '3%',
			        right: '3%',
			        bottom: '0%',
			        top:'5%',
			        containLabel: true
			    },
				xAxis:{
					type: "category",
					boundaryGap: !1,
					data: ["1月", "2月", "3月", "4月", "5月", "6月","7月", "8月", "9月", "10月", "11月", "12月",],
			          axisLine: {
			              lineStyle: {
			                  color: "#b0c5e4",
			              }
			          }
				},
				yAxis: {
					type: "value",
			          axisLine: {
			              lineStyle: {
			                  color: "#b0c5e4",
			              }
			          }
				},
				series: [{
					name: "销售额",
					type: "line",
					smooth: !0,
					itemStyle: {
						normal: {
							areaStyle: {
								type: "default"
							}
						}
					},
					data: [111, 222, 333, 444, 555, 666, 333, 3333, 5555,888,115,698]
				}]
			}, {
				
				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				series: [
	              {
	                  name: '访问来源',
	                  type: 'pie',
	                  radius:'50%',
	                  avoidLabelOverlap: false,
	                  label: {
	                      show: false,
	                      position: 'center'
	                  },
	      
	                  emphasis: {
	                      label: {
	                          show: true,
	                          fontSize: '30',
	                          fontWeight: 'bold'
	                      }
	                  },
	                  labelLine: {
	                      show: false
	                  },
	                  itemStyle:{ 
				        normal:{ 
				           label:{ 
				              show: true, 
				              formatter: '{b}:{d}%' 
				           }, 
				           labelLine :{show:true},
				           color:function(params) {
	                            var colorList = [
                                    '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000',
                                ];
                                return colorList[params.dataIndex]
	                        }
						} 
					  },
	                  data: [{
						value:252,
						name: "授牌"
					}, {
						value: 610,
						name: "试点"
					}, {
						value: 320,
						name: "培育"
					}, {
						value: 535,
						name: "待评审"
					}, {
						value: 100,
						name: "其它"
					}]
	              }
	          ]
				
				
			}, {
				grid: {
			        left: '0%',
			        right: '3%',
			        bottom: '0',
			        top:'15%',
			        containLabel: true
			    },
				xAxis: [{
					type: "category",
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          },
					data: ["06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"]
				}],
				yAxis: [{
					type: "value",
          axisLine: {
              lineStyle: {
                  color: "#b0c5e4",
              }
          }
				}],
				series: [{
					type: "line",
					data: [200, 300, 400, 610, 150, 270, 380,200, 300, 400, 610, 150, 270, 380]
				}]
			}]
     		 var option=n[index];
      		var i=index+1;
      		var id='tb0'+i;
			let myChart = echarts.init(document.getElementById(id))
			myChart.setOption(option);
	  	},
		timeDate:function(time,s){
	  		return FormatDate(time,s);
	    },
	    
	    getsq:function(){
	    	var list=[
	    		{logo:'1',content:'这里好好玩呀'},
	    		{logo:'2',content:'什么街呀'},
	    		{logo:'3',content:'这里好好玩呀这里好好玩呀这里好好玩呀这里好好玩呀这里好好玩呀这里玩呀'},
	    		{logo:'4',content:'好热闹！！'},
	    	]
	    	this.sqlist=list;
	    	var _this=this;
			setInterval(function(){_this.doaddarr()},5000);

	    },
	    doaddarr:function(){
	    	var list=this.sqlist;
	    	var arr=['好多好吃的！！','有没有一起看电影的？','哪里有促销打折活动呀','组团刷折扣','无语了','好塞~~','中国医药将继续协助世卫组织在华采购个人防护用品，并使用其位于北京和广州的仓库存放上述物资。','前一阶段，中国医药健康产业股份有限公司为世界卫生组织在华采购防疫物资提供了大力协助','好塞~~','好塞~~']
			var num = Math.floor(Math.random()*(1 - 10) + 10);
			var obj={};
			obj.logo=num;
			obj.content=arr[num-1];
			list.unshift(obj);
			this.sqlist=list;
	    },
	  	screens:function(){
			return screen();
		},
      getrl:function(){
      	var _this=this;
	        $.get(mapurl+'/static/other/js/hangzhou-tracks.json', function (data) {
	        var points = [].concat.apply([], data.map(function (track) {
	            return track.map(function (seg) {
	                return seg.coord.concat([1]);
	            });
	        }));
	        let myChart = echarts.init(document.getElementById('tb04'))
	        var option='';
	        myChart.setOption(option = {
	            animation: false,
	            bmap: {
	                center: [120.13066322374, 30.240018034923],
	                zoom: 14,
	                roam: true
	            },
	            visualMap: {
	                show: false,
	                top: 'top',
	                min: 0,
	                max: 5,
	                seriesIndex: 0,
	                calculable: true,
	                inRange: {
	                    color: ['blue', 'blue', 'green', 'yellow', 'red']
	                }
	            },
	            series: [{
	                type: 'heatmap',
	                coordinateSystem: 'bmap',
	                data: points,
	                pointSize: 5,
	                blurSize: 6
	            }]
	        });
	        // 添加百度地图插件
	        var bmap = myChart.getModel().getComponent('bmap').getBMap();
			bmap.addControl(new BMap.MapTypeControl());
			
			var arr=[
				{lat:120.177062,lon:30.245978,dates:{name:'杭州清河坊步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.215752,lon:30.214367,dates:{name:'杭州星光大道电影文化步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.179989,lon:30.270499,dates:{name:'杭州中国丝绸城步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.077558,lon:30.281039,dates:{name:'杭州湘湖慢生活街',hot:'100',top:'100',up:'100'}},
				{lat:121.566869,lon:29.883002,dates:{name:'宁波老外滩步行街',hot:'100',top:'100',up:'100'}},
				{lat:121.557164,lon:29.878734,dates:{name:'宁波东鼓道步行街',hot:'100',top:'100',up:'100'}},
				{lat:121.544612,lon:29.85967,dates:{name:'宁波南塘老街',hot:'100',top:'100',up:'100'}},
				{lat:121.553661,lon:29.814203,dates:{name:'宁波水街',hot:'100',top:'100',up:'100'}},
				{lat:121.168279,lon:27.828452,dates:{name:'温州五马•禅街',hot:'100',top:'100',up:'100'}},
				{lat:120.421555,lon:30.419808,dates:{name:'嘉兴海宁硬石商业街',hot:'100',top:'100',up:'100'}},
				{lat:120.63979,lon:27.78825,dates:{name:'温州瑞安忠义街',hot:'100',top:'100',up:'100'}},
				{lat:120.760924,lon:30.776212,dates:{name:'湖州爱山广场步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.215752,lon:30.214367,dates:{name:'嘉兴月河步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.439829,lon:30.885181,dates:{name:'湖州南潯东大街',hot:'100',top:'100',up:'100'}},
				{lat:119.92567,lon:28.443857,dates:{name:'湖州长兴东鱼坊步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.215752,lon:30.214367,dates:{name:'丽水处州府城步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.59228,lon:29.998153,dates:{name:'绍兴鲁迅中路步行街',hot:'100',top:'100',up:'100'}},
				{lat:119.672802,lon:29.106138,dates:{name:'金华古子城步行街',hot:'100',top:'100',up:'100'}},
				{lat:118.875445,lon:28.961353,dates:{name:'衢州水亭门步行街',hot:'100',top:'100',up:'100'}},
				{lat:122.206524,lon:29.999219,dates:{name:'舟山520幸福街',hot:'100',top:'100',up:'100'}},
				{lat:121.12344,lon:28.84693,dates:{name:'台州临海紫阳古街',hot:'100',top:'100',up:'100'}},
			];
			_this.maplist=arr;
			_this.bmap=bmap;
			setTimeout(function(){
				for(var i=0;i<arr.length;i++){
					var m=_this.setmapinfo(i)
				}
			},600)
			bmap.setMapStyleV2({     
			  styleId: '236bf9896f40739fa728522fe36fec3b'
			});
        });

      },
      setmapinfo:function(num){
      	var bmap=this.bmap;
      	var res=this.maplist[num];
      	var point = new BMap.Point(res.lat,res.lon);
		var marker = new BMap.Marker(point);
		bmap.addOverlay(marker);  
        var sContent="<div class='mapinfo'>"+
                             "街区名称："+res.dates.name+"<br/>"+
                             "热闹度："+res.dates.hot+"<br/>"+    
                             "热销度："+res.dates.top+"<br/>"+
                             "发展度："+res.dates.up+"<br/>"+
                    "</div>";    
        var infoWindow=new BMap.InfoWindow(sContent);
	 	marker.openInfoWindow(infoWindow);
	 	marker.addEventListener("click", function () {
            this.openInfoWindow(new BMap.InfoWindow(sContent));
            
       });
	 	return marker;
      },
      mapshow:function(num){
      	this.mapcur=num;
      	this.setmapinfo(num)
      },
      getfg:function(){
        var option = {
            barWidth :10,
            grid: {
		        left: 0,
		        right: '5%',
		        bottom: '3%',
		        top:'3%',
		        containLabel: true
		    },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: "#b0c5e4",
                    }
                },
                data: ['5-01', '5-02', '5-03', '5-04', '5-05', '5-06', '5-07', '5-08', '5-09', '5-10', '5-11', '5-12', '5-13', '5-14', '5-15']
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: "#b0c5e4",
                    }
                },

                type: 'value'
            },
            series: [{
                data: [80, 68, 78, 80, 70, 90, 99,87,95, 80, 70, 90, 99,87,95],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0)'
                }
            }]
        };
        let myChart = echarts.init(document.getElementById('tb05'))
        myChart.setOption(option);
      }
	  },
	  updated:function(){
  		this.isShow = true;
  		layui.use('form', function(){
		  var form = layui.form;
		  form.render();

		});

 	  },
	}
</script>
<style>
	
	@import '../../../static/other/css/zlgj/index.css'
	
</style>
